<html>
    <head>
        <title>GeoExt MapPanel Example</title>

        <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.2.1/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.2.1/ext-all.js"></script>
        <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.2.1/resources/css/ext-all.css" />
        <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.2.1/examples/shared/examples.css" />
        <script src="http://www.openlayers.org/api/2.10/OpenLayers.js"></script>
        <script type="text/javascript" src="../script/GeoExt.js"></script>

        <script type="text/javascript" src="mappanel-div.js"></script>

    </head>
    <body>
        <h1>GeoExt.MapPanel with an Existing OpenLayers.Map</h1>
        <p>This example shows the how to create a MapPanel with a map that has
        already been created.  See <a href="mappanel-window.html">mappanel-window.html</a>
        for an example that creates the MapPanel without creating the map first.<p>
        <p>This example makes use of a <code>CookieProvider</code>. The <code>MapPanel</code>
        being a stateful component, if you reload the page the map should be
        at the same location as previously. Also the <code>getState</code> and
        <code>applyState</code> methods are overloaded so the size of the map
        panel is also restored when refreshing the page.</p>
        <p>The js is not minified so it is readable. See <a href="mappanel-div.js">mappanel-div.js</a>.</p>
        <div id="mappanel"></div>
        <input type="button" onclick="mapSizeUp()" value="bigger"></input>
        <input type="button" onclick="mapSizeDown()" value="smaller"></input>
    </body>
</html>
